<template>
    <view class="reset-pwd-container">
        <view class="login-box">

            <!-- 表单区域 -->
            <view class="login-form">
                <u--form :model="formData" ref="loginForm" :rules="rules" labelPosition="top" labelWidth="auto">
                    <u-form-item label="手机号" prop="phone">
                        <u-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11" type="number"></u-input>
                    </u-form-item>
                    <u-form-item label="验证码" prop="code">
                        <u-input v-model="formData.code" placeholder="请输入验证码" maxlength="4" type="number">
                            <template #suffix>
                                <u-code ref="uCode" keepRunning @change="codeChange" seconds="60"
                                    changeText="X秒后重新获取" unique-key="page-reset-pwd"></u-code>
                                <u-button @tap="getCode" :text="tips" type="primary" size="mini"></u-button>
                            </template>
                        </u-input>
                    </u-form-item>
                    <u-form-item label="密码" prop="password">
                        <u--input v-model="formData.password" type="password" placeholder="请输入密码"></u--input>
                    </u-form-item>
                    <u-form-item label="确认密码" prop="confirmPassword">
                        <u--input v-model="formData.confirmPassword" type="password" placeholder="请再次输入密码"></u--input>
                    </u-form-item>
                </u--form>

                <!-- 登录按钮 -->
                <view class="login-button">
                    <u-button type="primary" :disabled="!isFormValid" @click="handleResetPwd">重置密码</u-button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                phone: '',
                code: '',
                password: '',
                confirmPassword: ''
            },
            tips: "",
            rules: {
                phone: [{
                    required: true,
                    message: '请输入手机号',
                    trigger: ['blur', 'change']
                }, {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '手机号格式不正确',
                    trigger: ['blur']
                }],
                code: [{
                    required: true,
                    message: '请输入验证码',
                    trigger: ['blur', 'change']
                }, {
                    len: 4,
                    message: '验证码长度应为4位',
                    trigger: ['blur', 'change']
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: ['blur', 'change']
                }, {
                    min: 6,
                    max: 18,
                    message: '密码长度在6-18个字符之间',
                    trigger: ['blur', 'change']
                }],
                confirmPassword: [{
                    required: true,
                    message: '请再次输入密码',
                    trigger: ['blur', 'change']
                }, {
                    validator: (rule, value, callback) => {
                        if (value !== this.formData.password) {
                            callback(new Error('两次输入的密码不一致'))
                        } else {
                            callback()
                        }
                    },
                    trigger: ['blur', 'change']
                }]
            }
        }
    },
    computed: {
        isFormValid() {
            const { phone, code, password, confirmPassword } = this.formData
            return phone && code && password && confirmPassword && password === confirmPassword
        }
    },
    methods: {
        // 获取验证码
        codeChange(text) {
            this.tips = text
        },
        getCode() {
            this.$refs.loginForm.validateField('phone', (errorRules) => {
                if (!errorRules || errorRules.length === 0) {
                    if (this.$refs.uCode.canGetCode) {
                        this.$utils.showLoading()
                        // 这里传入3表示重置密码的验证码类型
                        this.$services.loginService.getSmsCode(this.formData.phone, 3).then(res => {
                            this.formData.code = res.msgCode || ''
                            this.$refs.uCode.start()
                            this.$utils.hideLoading()
                        }).catch((err) => {
                            this.$utils.hideLoading()
                        })
                    } else {
                        this.$utils.showMessage('请稍后再来尝试')
                    }
                }
            })
        },
        // 处理重置密码
        handleResetPwd() {
            this.$refs.loginForm.validate().then(valid => {
                if (valid) {
                    this.$utils.showLoading('提交中...')
                    this.$services.loginService.resetPassword({
                        phone: this.formData.phone,
                        code: this.formData.code,
                        password: this.formData.password
                    }).then(() => {
                        this.$utils.hideLoading()
                        this.$utils.showMessage('密码重置成功')
                        // 延迟跳转到登录页
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    }).catch(err => {
                        this.$utils.hideLoading()
                    })
                }
            })
        }
    },
    onReady() {
        this.$refs.loginForm.setRules(this.rules)
    }
}
</script>

<style lang="scss" scoped>
.reset-pwd-container {
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    padding: 40rpx;

    .login-box {
        border-radius: 20rpx;
        padding: 40rpx;
        .login-form {
            .login-button {
                margin-top: 60rpx;
            }
        }
    }
}
</style>